<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        
        <div class="row">
            <input type="text" v-model="keywords">
            <button @click="search">搜索</button>
        </div>
        
        <div v-for="(item,index) in news">
            <h1>
                标题：
                <span v-html="item.title"></span>
            </h1>
            <p>来源:{{item.author_name}}</p>
            <div v-if="item.thumbnail_pic_s">
                <img :src="item.thumbnail_pic_s" alt="" srcset="">
            </div>
            <div v-else>
                <img src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics4.baidu.com%2Ffeed%2F80cb39dbb6fd5266e33c900b55c58527d5073687.jpeg%40f_auto%3Ftoken%3D87be83b9f5223da4c6668d58919c42fd&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1682614800&t=c8e887e430ee27342ef7db67328e4d07" alt="" srcset="">
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="./vue.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            news:[],
            keywords:""
        },
        created() {
            this.getnews()
          
        },
        methods: {
            getnews(){
                axios({
                    method:"get",
                    url:"./data.json"
                }).then(res=>{
                    this.news = res.data.result.data;
                })
            },
            search(){
                // console.log(this.keywords);
                let keywords = this.keywords;
                // this.news.forEach(item => {
                //     if(item.title.indexOf(keywords) !== -1){
                //         console.log(item.title);
                //     }
                // });
                this.news = this.news.filter(item=> {
                    let reg = new RegExp(keywords, "g");
                    item.title = item.title.replace(reg, `<font color='red'>${keywords}</font>`);
                    return item.title.indexOf(keywords) !== -1;
                });
            }
        },
    })
</script>
</html>